<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" class="title-class">
  <div class="main-container">
    <!-- 表单详情容器 -->
    <div class="form-container">
      <div class="form-content">
        <el-form :model="formObj" label-width="100px" class="two-column-form">
          <template v-for="item in formList">
            <el-form-item :label=item.label >
              <el-input v-model="formObj[item.prop]" name="tel" autocomplete="off"></el-input>
            </el-form-item>
          </template>
        </el-form>
      </div>
      <div class="form-footer">
        <el-button type="primary"   @click="_save">保存</el-button>
        <el-button  @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </div>
  </div>
  </el-dialog>
</template>

<script>

export default {

  mounted(){
  },
  props:{
    formList: {},
    formObj:{},
    title:''
  },

  name: "SysMenuEdit",
  data(){
    return{
      dialogFormVisible: false,
    }
  },
  methods:{

    _open(){
      this.dialogFormVisible=true;
    },
    _close(){
      this.dialogFormVisible=false;
    },

    _save(){
      this.$emit('save-result-change',this.formObj);
    }
  },
}
</script>

<style >
* {
  box-sizing: border-box;
}
body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  background-color: #f5f7fa;
  color: #606266;
  line-height: 1.5;
}
.title-class .el-dialog__header {
  padding: 20px 20px 10px;
  background: #64b5ff;
}

.blue-title-header {
  background: linear-gradient(135deg, #409EFF 0%, #64b5ff 100%);
  color: white;
  padding: 25px 0;
  margin-bottom: 25px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}
.main-container {
  max-width: 1000px;
  margin: 0 auto;
  //padding: 0 20px 30px 20px;
}
.page-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-title i {
  margin-right: 12px;
  font-size: 28px;
}
.page-description {
  margin: 0;
  font-size: 15px;
  opacity: 0.9;
}
.form-container {
  //background: #fff;
  //border-radius: 6px;
  //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  //overflow: hidden;
  //margin-bottom: 25px;
}
.form-header {
  //padding: 18px 25px;
  //border-bottom: 1px solid #ebeef5;
  //background-color: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form-title {
  font-size: 18px;
  color: #409EFF;
  font-weight: 500;
}
.form-status {
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 13px;
}
.status-active {
  background-color: #f0f9eb;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}
.form-content {
  padding: 30px;
}
.two-column-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
}
.form-item-with-border .el-form-item__content {
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 0 15px;
  min-height: 40px;
  display: flex;
  align-items: center;
  background-color: #f9fafc;
}
.form-footer {
  padding: 20px;
  //background-color: #fafafa;
  //border-top: 1px solid #ebeef5;
  text-align: center;
}
.full-width {
  grid-column: 1 / span 2;
}
.el-form-item {
  margin-bottom: 22px;
}
.el-form-item__label {
  font-weight: 500;
  color: #606266;
}
@media (max-width: 768px) {
  .two-column-form {
    grid-template-columns: 1fr;
  }
  .full-width {
    grid-column: 1;
  }
  .main-container {
    padding: 0 15px 20px 15px;
  }
  .form-content {
    padding: 20px;
  }
}
</style>
